<template>
	<Modal v-model="modal" :z-index="2" title="修改" width="700" @on-ok="onOk" @on-cancel="onCancel">
		<Form :model="formData" :label-width="125">
			<FormItem label="活动名称">
				<Input v-model="formData.name" placeholder="请输入名称" disabled></Input>
			</FormItem>
			<FormItem label="活动状态">
				<Select v-model="formData.status" style="width:200px" disabled>
					<Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem label="活动类型">
				<Space direction="vertical" size="large">
					<RadioGroup v-model="formData.type">
						<Radio :label="1" disabled>新品</Radio>
						<Radio :label="2" disabled>促销</Radio>
					</RadioGroup>
				</Space>
			</FormItem>
			<FormItem label="活动开始时间">
				<Input v-model="formattedStartTime" placeholder="请输入活动开始时间" disabled></Input>
			</FormItem>
			<FormItem label="活动结束时间">
				<Input v-model="formattedEndTime" placeholder="请输入活动结束时间" disabled></Input>
			</FormItem>
			<FormItem label="活动要求">
				<Input v-model="formData.requirements" type="textarea" :autosize="{ minRows: 4 }"
					placeholder="请输入活动要求"></Input>
			</FormItem>
		</Form>
		<template slot="footer">
			<Button @click="onCancel">取消</Button>
			<Button type="primary" @click="onOk">提交</Button>
		</template>
	</Modal>
</template>

<script>
	import {
		saveFictitiousReply,
		saveActivityApi
	} from '@/api/product';
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			activeDetail: {
				type: Object,
				default () {
					return {};
				},
			},

		},
		data() {
			return {
				formData: {
					id: 0,
					end_time: '',
					start_time: '',
					status: 0,
					name: "",
					type: 0,
					requirements: "",
					auto_generate: "",
				},
				modal: false,
				product_score: 0,
				service_score: 0,
				typeList: [
					{
						value: 0,
						label: '未开始'
					},
					{
						value: 1,
						label: '报名中'
					},
					{
						value: 2,
						label: '活动中'
					},
					{
						value: 3,
						label: '已结束'
					},
				],
				pics: [],
				add_time: '',
			};
		},
		computed: {
			// 计算属性用于格式化开始时间
			formattedStartTime() {
				return this.formatTime(this.formData.start_time);
			},
			// 计算属性用于格式化结束时间
			formattedEndTime() {
				return this.formatTime(this.formData.end_time);
			},
		},
		watch: {
			picture(value) {
				this.pics = value.map((item) => {
					return item.att_dir;
				});
			},
			activeDetail(value) {
				if (value) {
					this.formData.id = value.id;
					this.formData.end_time = value.end_time;
					this.formData.start_time = value.start_time;
					this.formData.status = value.status;
					this.formData.name = value.name;
					this.formData.type = value.type;
					this.formData.requirements = value.requirements;
					this.formData.auto_generate = value.auto_generate;
					console.log("this.formData", this.formData)
				}
			},
		},
		methods: {
			// 格式化时间方法
			formatTime(isoTime) {
				if (!isoTime) return '';
				// 提取日期和时间部分
				const [datePart, timePart] = isoTime.split('T');
				if (!timePart) return datePart;
				// 提取小时和分钟
				const time = timePart.substring(0, 5);
				return `${datePart} ${time}`;
			},
			removeUser() {
				this.avatar.att_dir = '';
			},
			// removePicture(att_id) {
			//   this.$emit('removePicture', att_id);
			// },
			// onChange(date) {
			//   this.add_time = date;
			// },
			// callGoods() {
			//   this.$emit('callGoods');
			// },
			// callAttr() {
			//   this.$emit('callAttr');
			// },
			// callPicture(type) {
			//   this.$emit('callPicture', type);
			// },
			onOk() {
				if (!this.formData.requirements) {
					return this.$Message.error('请填写活动要求');
				}
		
				saveActivityApi(this.formData.id,this.formData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.modal = false
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			onCancel() {
				this.modal = false
				this.$emit('update:modal', false);
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.upload-box {
		position: relative;
		display: inline-block;
		width: 58px;
		height: 58px;
		border: 1px dashed #c0ccda;
		border-radius: 4px;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
		vertical-align: middle;
		text-align: center;
		line-height: 58px;
		cursor: pointer;

		+.upload-box {
			margin-left: 10px;
		}

		.ivu-icon {
			vertical-align: middle;
			font-size: 20px;
		}

		.image {
			width: 100%;
			height: 100%;
		}

		.btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 20px;
			height: 20px;
			transform: translate(50%, -50%);
		}
	}
</style>